﻿
@{
    ViewData["Title"] = "功能列表";
}
@*<p>
    <a asp-action="Create">增加功能</a>
</p>*@

<div class="breadcrumbs ace-save-state" id="breadcrumbs">
    <ul class="breadcrumb">
        <li>
            <i class="ace-icon fa fa-home home-icon"></i>
            <a href="~/Home/Index">首页</a>
        </li>
        <li>
            <a href="#">系统管理</a>
        </li>
        <li class="active">功能管理</li>
    </ul>

</div>

<div class="row">
    <div class="col-xs-12">
        <h3 class="row header smaller lighter blue">
            <dic class="col-sm-7">
               
            </dic><!-- /.col -->
            <dic class="col-sm-5">
                <label class="pull-right inline">
                    @*<button id="btnAddRoot" class="btn btn-sm btn-primary" type="button" data-original-title="新增顶级功能" data-toggle="tooltip" data-widget="">
                        <i class="fa fa-plus-square"></i>&nbsp;&nbsp;新增顶级
                    </button>*@
                    <button id="btnAdd" title="" class="btn btn-sm btn-primary" type="button" data-original-title="新增功能" data-toggle="tooltip" data-widget="">
                        <i class="fa fa-plus-circle"></i>&nbsp;&nbsp;新增
                    </button>
                    <button id="btnEdit" title="" class="btn btn-sm btn-primary" type="button" data-original-title="编辑功能" data-toggle="tooltip" data-widget="">
                        <i class="fa fa-edit"></i>&nbsp;&nbsp;编辑
                    </button>

                    <button id="btnDelete" title="" class="btn btn-sm btn-danger" type="button" data-original-title="删除功能" data-toggle="tooltip" data-widget="">
                        <i class="fa fa-times"></i>&nbsp;&nbsp;删除
                    </button>
                    @*<button id="btnLoadRoot" title="" class="btn btn-sm btn-success" type="button" data-original-title="加载顶级功能" data-toggle="tooltip" data-widget="">
                        <i class="fa fa-list"></i>&nbsp;&nbsp;加载顶级
                    </button>*@
                </label>
            </dic><!-- /.col -->
        </h3>

        <div class="col-md-3" style="border:solid 1px  gray;">
            <div class="box box-primary">
                
                <div class="box-body">
                    <div id="treeDiv" class="portlet-body">
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-9">
            <div class="box box-primary">
                <div class="box-header with-border">



                    <table class="table table-striped table-bordered table-hover dataTable no-footer" role="grid" aria-describedby="sample_2_info">
                        <thead>
                            <tr role="row">
                                <th class="table-checkbox" style="width:40px;text-align:center;"><input id="checkAll" class="group-checkable" type="checkbox"></th>
                                <th tabindex="0" aria-label=""class="hide">
                                    编号
                                </th>
                                <th tabindex="0" aria-label="">
                                    父级功能
                                </th>
                                <th tabindex="0" aria-label="">
                                    同级序号
                                </th>
                                <th tabindex="0" aria-label="">
                                    名字
                                </th>
                                <th tabindex="0" aria-label="">
                                    功能编码
                                </th>
                                <th tabindex="0" aria-label="">
                                    请求路径
                                </th>
                                <th tabindex="0" aria-label="">
                                    类型
                                </th>
                                <th tabindex="0" aria-label="">
                                    备注
                                </th>
                                @*<th tabindex="0" style="width: 230px;" aria-label="">
                                    操作
                                </th>*@
                            </tr>
                        </thead>
                        <tbody id="tableBody"></tbody>
                    </table>
                    <div id="grid_paging_part"></div>



                </div>

            </div>
        </div>
    </div>
    </div>
    @Html.Partial("Edit")
    <script>
        var selectedMenuId = -1;
        var pageSize = 20;
        $(function () {

            $(document).attr("title", "功能");
            $("#btnAddRoot").click(function () { Add(0); });
            $("#btnAdd").click(function () { Add(1); });
            $("#btnEdit").click(function () { Edit(this); });

            $("#btnSave").click(function () { Save(this); });
            $("#btnDelete").click(function () { DeleteMulti(); });
            $("#btnLoadRoot").click(function () {
                selectedMenuId = 0;
                LoadTables(1, pageSize);
            });
            $("#checkAll").click(function () { CheckAll(this) });
            InitTree();
        });
        //加载功能树
        function InitTree() {
            $.jstree.destroy();
            AjaxData("/Menus/GetMenuTreeData?_t=" + new Date().getTime(), "", "Get", null, function (d) {
                if (d.success) {
                    $('#treeDiv').jstree({       //创建JsTtree
                        'core': {
                            'data': d.data,        //绑定JsTree数据
                            "multiple": false    //是否多选
                        },
                        "plugins": ["state", "types", "wholerow"]  //配置信息
                    })
                    $("#treeDiv").on("ready.jstree", function (e, data) {   //树创建完成事件
                        data.instance.open_all();    //展开所有节点
                    });
                    $("#treeDiv").on('changed.jstree', function (e, data) {   //选中节点改变事件
                        var node = data.instance.get_node(data.selected[0]);  //获取选中的节点
                        if (node) {
                            selectedMenuId = node.id;
                            LoadTables(1, pageSize);
                        };
                    });
                }
            });
        }
        //加载功能列表数据
        function LoadTables(startPage, pageSize) {
            $("#tableBody").html("");
            $("#checkAll").prop("checked", false);

            AjaxData("/Menus/GetMenusByParent?parentId=" + selectedMenuId + "&startPage=" + startPage + "&pageSize=" + pageSize + "&_t=" + new Date().getTime(), "", "Get", null, function (d) { 
                $("#tableBody").html("");
                if (d.success) {
                    var data = d.data;
                    $.each(data.data, function (i, item) {
                        var tr = "<tr>";
                        tr += "<td align='center'><input type='checkbox' class='checkboxs' value='" + item.id + "'/></td>";
                        tr += "<td class='hide'>" + item.id + "</td>";
                        tr += "<td>" + item.parentName + "</td>";
                        tr += "<td>" + item.serialNumber + "</td>";
                        tr += "<td>" + item.name + "</td>";
                        tr += "<td>" + (item.code == null ? "" : item.code) + "</td>";
                        tr += "<td>" + (item.url == null ? "" : item.url) + "</td>";
                        tr += "<td>" + (item.type == 0 ? "功能菜单" : "操作按钮") + "</td>";
                        tr += "<td>" + (item.remarks == null ? "" : item.remarks) + "</td>";
                        //tr += "<td><button class='btn btn-info btn-xs' href='javascript:;' onclick='Edit(\"" + item.id + "\")'><i class='fa fa-edit'></i> 编辑 </button> </td>";
                        tr += "</tr>";
                        $("#tableBody").append(tr);
                    })
                    $("#grid_paging_part").lagerPaper({
                        currentIndex: data.pageIndex,
                        pageSize: pageSize,
                        totalCount: data.allCount,
                        pageCount: data.pageCount,
                        onPageChanged: function (e, pageIndex) {
                            LoadTables(pageIndex, pageSize);
                        }
                    });
                }
            });
        }
        //全选
        function CheckAll(obj) {
            $(".checkboxs").each(function () {
                if (obj.checked == true) {
                    $(this).prop("checked", true)

                }
                if (obj.checked == false) {
                    $(this).prop("checked", false)
                }
            });
        };
        //新增
        function Add(type) {

            var dialog = $("#addRootModal").removeClass('hide').dialog({
                modal: true,
                title: '新增功能',
                title_html: false,
                width: 650,
                height: 520

            });

            if (type === 1) {
                if (selectedMenuId == -1) {
                    layer.alert("请选择功能。");
                    return;
                }
                $("#ParentId").val(selectedMenuId);
            }
            else {
                $("#ParentId").val(0);
            }
            $("#Id").val(-1);
            $("#Code").val("");
            $("#Name").val("");
            $("#Type").val(0);
            $("#Url").val("");
            $("#Icon").val("");
            $("#SerialNumber").val(0);
            $("#Remarks").val("");
            
            //弹出新增窗体
            
           

        };
        //编辑
        function Edit() {
            var ids = [];
            $(".checkboxs").each(function () {
                if ($(this).prop("checked") == true) {
                    ids.push($(this).val());
                }
            });
            if (ids.length == 0) {
                layer.tips("请选择要编辑的记录。");
                return;
            };
            if (ids.length > 1) {
                layer.tips("不能同时编辑多条记录", "#btnEdit");
                return;
            }


            AjaxData("/Menus/GetMenusById?id=" + ids[0] + "&_t=" + new Date(), "", "Get", "", function (d) {
                if (d.success) { 

                    var dialog = $("#addRootModal").removeClass('hide').dialog({
                        modal: true,
                        title: '编辑功能',
                        title_html: false,
                        width: 650,
                        height: 520

                    });



                    var data = d.data;
                    $("#Id").val(data.id);
                    $("#ParentId").val(data.parentId);
                    $("#Name").val(data.name);
                    $("#Code").val(data.code);
                    $("#Type").val(data.type);
                    $("#Url").val(data.url);
                    $("#Icon").val(data.icon);
                    $("#SerialNumber").val(data.serialNumber);
                    $("#Remarks").val("");

                    

                }
            }); 
        };
        //保存
        function Save(selector) {
            var postData = { "dto": { "Id": $("#Id").val(), "ParentId": $("#ParentId").val(), "Name": $("#Name").val(), "Code": $("#Code").val(), "Type": $("#Type").val(), "Url": $("#Url").val(), "Icon": $("#Icon").val(), "SerialNumber": $("#SerialNumber").val(), "Remarks": $("#Remarks").val() } };

            AjaxData("/Menus/Edit", postData, "POST", selector, function (d) { 
                if (d.success) {
                    InitTree();

                    $(".ui-dialog-titlebar-close").trigger("click");
                } else {
                    layer.tips(d.message, "#btnSave");
                };
            });

           
        };
        //批量删除
        function DeleteMulti() {
            var ids = "";
            $(".checkboxs").each(function () {
                if ($(this).prop("checked") == true) {
                    ids += $(this).val() + ","
                }
            });
            ids = ids.substring(0, ids.length - 1);
            if (ids.length == 0) {
                layer.alert("请选择要删除的记录。");
                return;
            };
            //询问框
            layer.confirm("您确认删除选定的记录吗？", {
                btn: ["确定", "取消"]
            }, function () {
                var sendData = { "ids": ids };

                AjaxData("/Menus/DeleteMuti", sendData, "GET", "", function (d) { 

                    if (d.success) {
                        InitTree();
                        layer.closeAll();
                    }
                    else {
                        layer.alert("删除失败！");
                    }
                });
                
            });
        };
       
    </script>




